<template>
  <div class="listTbale" :class="{ h100: !showPagetion }">
    <el-table
      :data="data"
      :header-cell-style="headerCellStyle"
      :row-class-name="tableRowClassName"
      ref="krListTable"
      @select="select"
      @select-all="selectAll"
      @row-click="tableMethods.rowClick($event) || clickChange"
      height="100%"
      default-expand-all
      :row-key="rowKey"
      border
    >
      <el-table-column v-if="radioShow" align="left" width="60">
        <template slot-scope="scope">
          <el-radio
            v-model="radioCheck"
            :label="scope.row[rowKey]"
            :disabled="isDisabled(scope.row)"
            @change="(i) => radioSelect(scope.row)"
            @click.native="radioClick"
          >
            <i></i>
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column
        v-if="selectionShow"
        type="selection"
        width="55"
        :selectable="selectableMethod || null"
      ></el-table-column>
      <template v-for="(item, index) in column">
        <el-table-column
          :label="item.label"
          :width="item.width"
          :prop="item.prop"
          :key="index"
          v-if="!item.hide"
          align="left"
        >
          <template slot-scope="scope">
            <el-tooltip
              v-if="item.showTooltip"
              effect="dark"
              placement="top"
              :content="
                item.formatter
                  ? item.formatter(scope.row)
                  : item.text
                  ? formatterNull(scope.row[item.text])
                  : formatterNull(scope.row[scope.column.property])
              "
            >
              <span
                class="text-pre-wrap table-cloumn__span--tooltip onLine"
                style="display: inline-block"
                :class="{ chlldren: scope.$index && type == 'device'&& scope.column.property=='name'}"
              >
                {{
                  item.formatter
                    ? item.formatter(scope.row)
                    : formatterNull(scope.row[scope.column.property],scope.column)
                }}
              </span>
            </el-tooltip>
            <span v-else class="text-pre-wrap">
              {{
                item.formatter
                  ? item.formatter(scope.row)
                  : formatterNull(scope.row[scope.column.property])
              }}
            </span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="kr-table-pagination" v-if="showPagetion">
      <el-pagination
        :small="false"
        @current-change="handleCurrentChange"
        :current-page="searchForm.page"
        :page-size="searchForm.pageSize"
        layout="prev, pager, next, jumper"
        :total="totalNumber"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type:{
      type: String,
      default:"normal"
    },
    searchObj: Object,
    //表格总数
    totalNumber: {
      type: Number,
      default: 0,
    },
    //是否显示选择框
    selectionShow: {
      type: Boolean,
      default: false,
    },
    //是否显示单选
    radioShow: {
      type: Boolean,
      default: false,
    },
    //判断是否可以选择
    selectableMethod: {
      type: Function,
      default: () => {
        return true;
      },
    },
    //表格栏位数组
    column: Array,
    tableData: Array,
    //表格函数对象
    tableMethods: Object,
    //单选框书否禁用
    isDisabled: {
      type: Function,
      default: (row) => {
        return false;
      },
    },
    showPagetion: {
      type: Boolean,
      default: true,
    },
    rowKey: {
      type: String,
      default: "id",
    },
  },
  data() {
    return {
      radioCheck: null,
      radioCheckRow: null,
      searchForm: {
        //搜索的表单数据
        page: 1,
        pageSize: 15,
      },
      searchOrder: [],
      data: [],
    };
  },
  computed: {
    //表格头部样式
    headerCellStyle() {
      let style = {
        background: "#fafafa",
        color: "#333333",
        fontWeight: "bold",
        borderBottom: "1px solid #ebebeb",
        padding: 0,
      };
      if (this.noBorderRight) {
        style.borderRight = "none";
      }
      return style;
    },
  },
  watch: {
    tableData: {
      handler(val) {
        this.data = val;
        this.$emit("defaultSelection");
      },
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.searchForm = Object.assign(
        {},
        this.searchForm,
        this.searchObj.queryData
      );
      let data = JSON.parse(JSON.stringify(this.tableData));
      this.data = data;
    },
    /**判断空值默认- */
    formatterNull(text,column) {
      if (text === null || text === undefined || text === "") {
        return "-";
      } else {
        return text;
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.disabled) {
        return "disable-row";
      } else {
        return "";
      }
    },
    //查询数据
    searchData(noFirst) {
      this.searchForm.page = 1;
      this.searchOrder = [];
      this.searchObj.searchMethod(this.searchForm, this.searchOrder);
    },
    //设置单选框选中数据
    radioSelect(row) {
      this.radioCheckRow = row;
      this.radioCheck = row[this.rowKey];
      this.$emit("radioSelect", row);
    },
    //勾选表格数据
    select(rows, row) {
      let selected = rows.length && rows.indexOf(row) !== -1;
      this.$emit("selectChange", selected, row);
    },
    //勾选所有
    selectAll(selection) {
      let data = this.$refs.krListTable.selection;
      let selected = data.length > 0 ? true : false;
      this.$emit("selectAll", selected);
    },
    //点击行
    clickChange(row) {},
    //默认勾选
    selectioned(row) {
      this.$nextTick(() => {
        this.$refs.krListTable.toggleRowSelection(row, true);
      });
    },
    //取消勾选
    selectionCalce(row) {
      this.$refs.krListTable.toggleRowSelection(row, false);
    },
    //清除多选
    clearSelection() {
      this.$refs.krListTable.clearSelection();
    },
    toggleRowSelection(row, select) {
      this.$refs.krListTable.toggleRowSelection(row, select);
    },
    //表格页码改变
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.searchObj.searchMethod(this.searchForm, this.searchOrder);
    },
    radioClick(row) {
      this.radioCheck = null;
    },
    //获取单选数据
    getRadioData() {
      return JSON.parse(JSON.stringify(this.radioCheckRow));
    },
  },
};
</script>

<style lang="less" scoped>
.listTbale {
  height: calc(100% - 40px);
  .kr-table-pagination {
    height: 40px;
    padding-top: 20px;
    // padding-top: 5px;
    text-align: right;
    //padding-right: 10px;
  }
  /deep/.el-table .el-table__header-wrapper td,
  /deep/.el-table .el-table__header-wrapper th,
  /deep/.el-table th,
  /deep/ .el-table tr {
    height: 40px;
  }
  /deep/ .el-table .cell {
    word-break: normal;
  }
  /deep/ .el-table .warning-row {
    background: oldlace;
  }

  /deep/ .el-table .disable-row {
    background: #f8f8f8;
  }
  /deep/ .el-table .el-table__expand-icon {
    display: none;
  }
  .table-cloumn__span--tooltip {
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .chlldren{
    margin-left: 30px;
  }
}
.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>